﻿@page
@model Chino.IdentityServer.Pages.Account.Confirmation.PhoneModel
@inject IStringLocalizer<Chino.IdentityServer.Pages.Account.Confirmation.PhoneModel> L
@inject CommonLocalizationService CL
@inject Chino.IdentityServer.Configures.CountryCodeConfiguration CountryCodes
@{
    ViewContext.ClientValidationEnabled = true;
    ViewData["Nav_ShowLogin/Out"] = false;
    ViewData["Title"] = L["PageTitle"];
}
<div class="login-page pb-4 mb-4">

    <div class="login-form">
        @*<div class="lead">
                <h1 class="h3 mb-3 fw-normal">@L["title_login"]</h1>
            </div>*@
        <partial name="ValidationSummary" />

        <div class="card mt-1 shadow text-center">
            <div class="card-header">
                @L["card_header"]
            </div>
            <div class="card-body">
                <div class="alert alert-light" role="alert">
                    @L["Please verify the mobile number to complete the login."]
                </div>
                <form method="post">
                    <input asp-for="ReturnUrl" hidden />
                    <input asp-for="UserId" hidden />

                    @*输入手机号*@
                    <div class="form-group">
                        <label asp-for="InputModel.PhoneNumber" class="visually-hidden">@CL["phone_number"]</label>
                        <input type="tel" class="form-control input-head" id="phoneNumber" placeholder="@CL["phone_number"]" asp-for="InputModel.PhoneNumber" autofocus>
                    </div>
                    @*手机号国家代码*@
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-text input-middle" id="basic-addon1">@CL["country_calling_code"] +</span>
                            <input class="form-control input-middle" list="countryListOptions" placeholder="@CL["country_calling_code"]" id="phoneDialingCode" asp-for="InputModel.PhoneDialingCode" autofocus>
                            <datalist id="countryListOptions">
                                @foreach (var country in CountryCodes.Data)
                                {
                                    <option value="@country.DialingCodeWithoutPlus">@CL[country.Name] (@country.DialingCode)</option>
                                }
                            </datalist>
                        </div>
                    </div>
                    @*验证码*@
                    <div class="form-group">
                        <div class="input-group">
                            @*<span class="input-group-text input-end" id="basic-addon1">@CL["Verification Code"] +</span>*@
                            <input class="form-control input-end" placeholder="@CL["Verification Code"]" id="phoneVerificationCode" asp-for="InputModel.VerificationCode" autofocus>
                            <button class="btn btn-outline-secondary input-end" type="submit" formnovalidate name="button" value="sendVerificationCode">@L["Send verification code"]</button>
                        </div>
                    </div>

                    <button class="btn btn-primary" type="submit" name="button" value="confirm">@L["Confirm"]</button>
                </form>
            </div>
        </div>

    </div>
</div>



<style>

    body {
        background-color: #f5f5f5;
    }


    .login-form {
        width: 100%;
        max-width: 380px;
        margin: auto;
    }


        .login-form .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 10px;
            font-size: 16px;
        }

            .login-form .form-control:focus {
                z-index: 2;
            }

        .login-form .checkbox {
            font-weight: 400;
        }

        .login-form .input-head {
            margin-bottom: -1px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .login-form .input-middle {
            margin-bottom: -1px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .login-form .input-end {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .login-form .card-footer {
            font-size: small;
        }

            .login-form .card-footer a {
                text-decoration: none;
            }

                .login-form .card-footer a:hover {
                    text-decoration: none;
                }
</style>


@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}